<template>
	<div class="wrap">
		<div class="contend">
			<div class="main-left">
				<!-- 热门推荐 -->
				<hot-recommend></hot-recommend>
				<!-- 新碟上架 -->
				<new-dish></new-dish>
				<!-- 榜单 -->
				<bill></bill>
			</div>
			<div class="main-right">
				<!-- side -->
				<slide></slide>
			</div>
		</div>
	</div>
</template>

<script setup>
	import hotRecommend from './hotRecommend.vue'
	import newDish from './newDish.vue'
	import slide from './slide.vue'
	import bill from './bill.vue'
</script>

<style scoped>
	.wrap{
		width: 982px;
		min-height: 700px;
		border: 1px solid #d3d3d3;
		border-width: 0 1px;
		background: url('../assets/hotImg/wrap1.png') repeat-y 100% 100%;
	}
	.contend{
		width: 100%;
		display: flex;
	}
	.main-left{
		width: 74.3%;
		padding:20px 20px 40px;
	}
	.main-right{
		width: 26.7%;
		margin-left: 2px;
	}
</style>